<template>
  <div
    class="circle-progress"
    :style="{'width': width, 'height': height}">
    <svg viewBox="0 0 104 104">
      <path
        d="M 52 52 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
        class="circle-progress__track">
      </path>
      <path
        d="M 52 52 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94"
        class="circle-progress__path"
        :style="{'stroke-dashoffset': (1-percent)*299.08+'px'}">
      </path>
    </svg>
    <span class="circle-progress__perent">{{ formattedPercent }}%</span>
    <span class="circle-progress__text">{{ used }}{{ suffixe }}/{{ max }}{{ suffixe }}</span>
    <span class="circle-progress__title">{{ title }}</span>
  </div>
</template>
<script>
export default {
    props: {
        percent: Number,
        used: String,
        max: String,
        suffixe: String,
        title: String,
        width: String,
        height: String,
    },
    computed: {
        formattedPercent() {
            return (this.percent * 100).toFixed(0);
        },
    },
};
</script>
<style lang="scss" src="./index.scss">

</style>
